<!DOCTYPE html>
<html class="html" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta name="keywords" content="<%= obj.meta.keywords %>" />
<meta name="description" content="<%= obj.meta.description %>" />
<meta name="author" content="<%= obj.meta.author %>" />

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="msapplication-tap-highlight" content="no" />

<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>form</title>
<!-- <link rel="stylesheet/less" type="text/css" href="layout.less"> -->
<link rel="stylesheet" type="text/css" href="form.css">
<!-- <script type="text/javascript" src="../../../../node_modules/less/dist/less.js"></script> -->
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> -->
<style>
/* *{box-sizing: border-box;} */
</style>
<!-- <link rel="stylesheet/less" type="text/css" href="layout.less" /> -->
</head>
<body>
  form标签用于为用户输入创建 HTML 表单。<br>
  表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。<br>
  表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。<br>
  表单用于向服务器传输数据。<br>

  组合表单中的相关元素 fieldset > legend + content <br>
  fieldset 元素可将表单内的相关元素分组。<br>
  fieldset 标签将表单内容的一部分打包，生成一组相关表单的字段。<br>
  fieldset 标签并不能在视图层完成分组的实际任务（比如radio分组）<br>
  当一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。<br>
  fieldset 标签没有必需的或唯一的属性。<br>
  legend 标签为 fieldset 元素定义标题。<br>

  <form class="form" name="" id="" action="#" method="get" autocomplete="off" enctype="application/x-www-form-urlencoded">

    <label class="checkbox-box">
      <input type="checkbox" class="input-checkbox" name="c1" value="" id="jcb0">
      <i class="checkbox"></i>checkbox复选
    </label>
    <label class="checkbox-box">
      <input type="checkbox" class="input-checkbox" name="c1" value="" id="jcb1">
      <i class="checkbox"></i>checkbox复选
    </label>
    <label class="checkbox-box">
      <input type="checkbox" class="input-checkbox" name="c1" value="" id="jcb2">
      <i class="checkbox"></i>checkbox复选
    </label>
    <script>
      var jcb0 = document.getElementById('jcb0');
      var jcb1 = document.getElementById('jcb1');
      var jcb2 = document.getElementById('jcb2');
      jcb0.checked = true;
      jcb1.checked = false;
      jcb2.indeterminate = true;
    </script>
    
    <label class="radio-box">
      <input type="radio" class="input-radio" name=""" value="">
      <i class="radio"></i>radio单选
    </label>
    <label class="radio-box">
      <input type="radio" class="input-radio" name="" value="">
      <i class="radio"></i>radio单选
    </label>
    

    <button type="button" class="btn btn-default" role="button">btn</button>
    <button type="button" class="btn btn-default" role="button" disabled="disabled">btn</button>
  </form>
</body>
</html>